<template>
    <div class="flight-item" @click="isShow = !isShow">
        <div>
            <!-- 显示的机票信息 -->
            <el-row type="flex" align="middle" class="flight-info">
                <el-col :span="6">
                    <span>{{data.airline_name}} </span> MU5316
                </el-col>
                <el-col :span="12">
                    <el-row type="flex" justify="space-between" class="flight-info-center">
                        <el-col :span="8" class="flight-airport">
                            <strong>{{data.dep_time}}</strong>
                            <span>{{data.org_airport_name}}</span>
                        </el-col>
                        <el-col :span="8" class="flight-time">
                            <span>{{rankTime}}</span>
                        </el-col>
                        <el-col :span="8" class="flight-airport">
                            <strong>{{data.arr_time}}</strong>
                            <span>{{data.dst_airport_name}}</span>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6" class="flight-info-right">
                    ￥<span class="sell-price">810</span>起
                </el-col>
            </el-row>
        </div>
        <div class="flight-recommend" v-show="isShow">
            <!-- 隐藏的座位信息列表 -->
            <el-row type="flex"  justify="space-between" align="middle" v-for="(item,index) in data.seat_infos" :key="index">
                <el-col :span="4">低价推荐</el-col>
                <el-col :span="20">
                    <el-row type="flex" justify="space-between" align="middle" class="flight-sell">
                        <el-col :span="16" class="flight-sell-left">
                            <span>{{item.name}}</span> | {{item.supplierName}}
                        </el-col>
                        <el-col :span="5" class="price">
                            ￥{{item.org_settle_price}}
                        </el-col>
                        <el-col :span="3" class="choose-button">
                            <nuxt-link :to="`/air/order?id=${data.id}&seat_xid=${item.seat_xid}`">
                                <el-button 
                                type="warning" 
                                size="mini">
                                选定
                                </el-button>
                            </nuxt-link>
                                
                            <p>剩余：{{item.discount}}</p>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            isShow: false
        }
    },
     // 声明组件可以接受的属性
    props: {
         // data是要传入属性名
        data: {
            // 属性的类型
            type: Object,
            // 默认是空数组
            default: {} // 如果不传属性采用这个默认值
        }
    },
    // computed的属性计算返回值，类似data
    // computed会监听实例下属性的变化，一旦函数内引用的实例属性发生变化，会重新计算并且返回新的值
    computed: {
        rankTime(){
            // 如果接口还没有请求回来时候，先返回空
            if(!this.data.arr_time) return "";
            
            // 到达时间
            const arr = this.data.arr_time.split(":"); // [18, 30]
            const dep = this.data.dep_time.split(":"); // [16, 00]
            // 判断是不是飞到明天的清晨，要是到达时间小于出发时间，就是飞到了第二天，所以要给他加个24
            if(arr[0] < dep[0]){
                arr[0] = +arr[0] + 24
            }

            // 到达和出发时间转换成分钟
            const end = arr[0] * 60 + +arr[1];
            // 出发时间
            const start = dep[0] * 60 + +dep[1];


            // 间隔分钟
            const dis = end - start; // 150
            // 小时
            const hours = Math.floor(dis / 60)
            // 分钟
            const min = dis % 60;
            return `${hours}时${min}分钟`;
        }
    },
}
</script>

<style scoped lang="less">
    .flight-item{
        border:1px #ddd solid;
        margin-bottom: 10px;

        .flight-info{
            padding:15px;
            cursor: pointer;

            > div{
                &:first-child, &:last-child{
                    text-align: center;
                }
            }
        }

        .flight-info-center{
            padding:0 30px;
            text-align: center;

            .flight-airport{
                strong{
                    display: block;
                    font-size:24px;
                    font-weight: normal;
                }
                span{
                    font-size: 12px;
                    color:#999;
                }
            }

            .flight-time{
                span{
                    display: inline-block;
                    padding:10px 0;
                    border-bottom: 1px #eee solid;
                    color:#999;
                }
            }
        }

        .flight-info-right{
            
            .sell-price{
                font-size: 24px;
                color:orange;
                margin:0 2px;
            }
        }
    }

    .flight-recommend{
        background: #f6f6f6;
        border-top:1px #eee solid;
        padding:0 20px;

        .flight-sell{
            border-bottom:1px #eee solid;
            padding:10px 0;

            &:last-child{
                border-bottom: none;
            }

            .flight-sell-left{
                font-size: 12px;
                span{
                    color:green;
                }
            } 

            .price{
                font-size: 20px;
                color:orange;
            }

            .choose-button{
                text-align: center;
                color:#666;
                button{
                    display: block;
                    width:100%;
                    margin-bottom:5px;
                }
            }
        }
    }
</style>